/* eslint-disable vue/no-unused-vars */
<!--
 * @Author: wangc
 * @Date: 2020-08-08 18:42:18
 * @LastEditTime: 2020-08-30 15:00:33
 * @Description: 
-->
<template>
  <div id="main">
    <!-- 欢迎你：{{username}}
    <br/>
    <button @click="quitLogin">退出登录</button>-->
    <div id="menu">
      <!-- <el-button
        type="info"
        icon="el-icon-s-unfold"
        circle
        @click="changeCollapse"
        style="background-color: #334157; margin-left: 20px"
      ></el-button> -->
      <el-menu
        mode="vertical"
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        background-color="#334157"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
      >
        <el-menu-item index="2" @click="messageClick">
          <i class="el-icon-menu"></i>
          <span slot="title">留言板</span>
        </el-menu-item>
        <el-menu-item index="4" @click="userClick">
          <i class="el-icon-setting"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div id="container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      isCollapse: false,
    };
  },
  created() {
    this.username = localStorage.getItem("username");
  },
  mounted() {
  },
  watch: {},
  methods: {
    /**
     * 退出登录时需要做的操作，清除缓存
     */
    quitLogin() {
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      this.$router.replace("/login");
    },
    changeCollapse(){
      this.isCollapse = !this.isCollapse
    },
    messageClick(){
      this.$router.replace("/main/message");
    },
    userClick(){
      this.$router.replace("/main/user");
    }
  },
};
</script>
<style lang="less" scoped>
#main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
/**=======================================左侧菜单栏的样式开始 */
#main > #menu {
  height: 100%;
  background-color: #334157;
  .el-menu {
    border: 0px;
  }
}
/**=======================================左侧菜单栏的样式结束 */

/**=======================================右侧内容的样式开始 */
#main > #container {
  height: 100%;
  flex-grow: 1;
  padding: 20px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  width: 100%;
  height: 10%;
}
.el-main {
  width: 100%;
  height: 90%;
}
/**=======================================右侧内容的样式结束 */
</style>